<template lang="pug">
  form.coupon-search-base#coupon-box(@submit.prevent="submitSearch")
    divider.search-divider(v-if="showtips") ↓淘宝天猫内部优惠券搜索神器↓
    .link
      router-link(:to="{name: 'Help'}") 怎么查优惠券?
    .coupon-search
      .icon
        img(:src="searchIcon")
      .input
        input(placeholder="粘贴淘宝天猫商品链接查询优惠券", v-model="inputUrl")
      .search-btn
        .btn(@click="submitSearch")
          | 搜索
</template>

<script>
import Divider from './Divider'
import searchIcon from '../assets/icons/search.svg'

export default {
  name: 'SearchCoupons',
  components: {
    Divider
  },
  props: ['showtips'],
  data () {
    return {
      searchIcon: searchIcon,
      inputUrl: ''
    }
  },
  methods: {
    submitSearch () {
      if (this.inputUrl) {
        this.$router.push({name: 'GoodSearch', query: {url: this.inputUrl}})
      }
    }
  }
}
</script>

<style lang="sass">
@import '../styles/color.sass';

.coupon-search-base
  background: $white
  padding: 2px 10px
  margin-bottom: 15px
  .vux-divider.search-divider
    color: $gray
    font-size: .8em
    margin: 0px
  .link
    text-align: right
    padding: 3px 15px
    a
      color: $gray
      font-size: .6em
      text-decoration: underline
  .coupon-search
    background: $input-background
    height: 48px
    border-radius: 24px
    overflow: hidden
    display: flex
    flex-direction: row
    justify-content: space-between
    align-items: center
    .icon
      text-align: center
      padding-left: 8px
      width: 30px
      color: $gray
      img
        height: 20px
    .input
      flex: 1 1
      input
        background: $input-background
        border: none
        width: 100%
        padding: 10px 5px
        font-size: .9em
        color: $gray
        &:focus
          outline: none
        &::-webkit-input-placeholder
          color: $gray
    .search-btn
      height: 48px
      background: linear-gradient(to right, $light-blue, $blue)
      line-height: 48px
      padding-right: 10px
      text-align: center
      color: $white
      font-size: .9em
      width: 80px
      .btn
        width: 100%
        height: 100%
        &:hover
          cursor: pointer
</style>
